<template>
    <div class="main">
        <el-popover ref="versions" width="400" trigger="hover">
            <p>我们正在使用：</p>
            <p>Node: {{versions.node}}</p>
            <p>V8:{{versions.v8}}</p>
            <p>Electron: {{versions.electron}}</p>
            <p>Chromium: {{versions.chrome}}</p>
        </el-popover>
        <div class="header">
            <h3>本页面使用<a href="http://www.yinyuetai.com" target="_blank">《音悦台》</a>作为源进行检索和加载</h3>
            <el-button type="text" v-popover:versions>
                <i class="el-icon-menu"></i>
            </el-button>
        </div>
        <div class="search-section">
            <el-input v-model="keyword" placeholder="请输入内容"></el-input>
            <el-button type="primary" @click="search">搜&emsp;索</el-button>
        </div>
        <div class="video-list">
            <div class="video-item" v-for="item in videoInfoList" :key="item.id" :class="{active: videoIds.indexOf(item.id) != -1}" @mousedown="showVideo(item)">
                <label>
                    <input type="checkbox" :value="item.id" v-model="videoIds">
                    <div class="title" v-html="item.hltitle"></div>
                    <img :src="item.headImg" alt="">
                </label>
            </div>
        </div>
        <el-dialog title="mv播放" :visible.sync="isShowVideo" size="full" :before-close="handleClose">
            <video ref="iVideo" v-if="videoInfo.url" :src="videoInfo.url" controls="controls" width="100%" autoplay></video>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>
<script>
let savePath = process.env.HOME + '/Desktop/mv';
export default {
    name: 'main',
    data() {
        return {
            keyword: 't-ara',
            videoInfoList: [],
            videoMap: {},
            videoIds: [],
            definition: 'heVideoUrl',
            versions: process.versions,
            loading: true,
            videoInfo: {url: ''},
            isShowVideo: false
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.search();
        },
        search() {
            let me = this;
            $.ajax({
                url: 'http://soapi.yinyuetai.com/search/video-search',
                type: 'GET',
                dataType: 'jsonp',
                data: {
                    keyword: this.keyword,
                    pageIndex: 1,
                    pageSize: 24,
                    offset: 0,
                    orderType: '',
                    area: '',
                    property: '',
                    durationStart: 0,
                    durationEnd: '',
                    regdateStart: '',
                    regdateEnd: 1497690299,
                    clarityGrade: '',
                    source: '3,10',
                    thirdSource: '17,57'
                },
                success(res) {
                    me.videoInfoList = res.videos.data;
                    me.getVideoUrlDetail();
                    me.initVideoInfoMap();
                }
            });
        },
        handleClose(done) {
            this.$refs.iVideo.pause();
            done();
        },
        initVideoInfoMap() {
            let tmp = {};
            this.videoInfoList.forEach(item => {
                tmp[item.id] = item;
            });
            this.videoMap = tmp;
        },
        getVideoUrlDetail() {
            this.videoInfoList.forEach((item, index) => {
                let id = item.id;
                let url = 'http://www.yinyuetai.com/api/info/get-video-urls?json=true&videoId=';
                $.ajax({
                    url: url + id
                }).then(res => {
                    let url = this.getHighestDefinitionUrl(res);
                    let dest = savePath + (item.hltitle.replace(/\/|(\<.*?\>)/g, '')) + '.mp4';
                    this.$set(this.videoInfoList[index], 'url', url);
                    this.$set(this.videoInfoList[index], 'dest', dest);
                });
            });
        },
        // 获取最高分辨率的URL
        getHighestDefinitionUrl(res) {
            // 清晰度 超清 高清 标清
            let definitionMap = ['heVideoUrl', 'hdVideoUrl', 'hcVideoUrl'];
            let url = '';
            definitionMap.some(definition => {
                if (res[definition]) {
                    url = res[definition];
                    return true;
                }
            });
            return url;
        },
        showVideo(videoInfo) {
            this.videoInfo = videoInfo;
            this.isShowVideo = true;
        }
    }
};
</script>
<style lang="less">
.header {
    overflow: hidden;
    h3 {
        text-align: center;
        margin: 0;
        padding: 15px;
    }
    .el-button {
        position: absolute;
        right: 11px;
        top: 14px;
        color: #545454;
    }
}
.search-section {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    justify-content: center;
    .el-input {
        margin-right: 10px;
        width: 200px;
    }
}

.video-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

.video-item {
    width: 240px;
    cursor: pointer;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    label {
        display: block;
    }
    &.active {
        border-color: red;
    }
    .title {
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 10px 20px;
    }
    img {
        width: 100%;
        vertical-align: bottom;
        border-top: 1px solid #ccc;
    }
    input[type="checkbox"] {
        display: none;
    }
}

.el-form {
    text-align: center;
}

.el-input,
.el-input__inner {
    width: initial;
}

.el-dialog--full {
    background: transparent;
}
</style>
